<!DOCTYPE html>
<html>
    <head>
        <title>UserCumulate Echarts bak</title>
        <meta charset="utf-8">
        <!-- 引入 ECharts 文件 -->
        <link rel="stylesheet" href="static/jquery-ui.min.css">
        <script src="static/echarts.js"></script>
        <script src="static/jquery-3.1.1.min.js"></script>
        <script src="static/jquery-ui.min.js"></script>
    </head>
    <body>
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <h1>UserCumulate Echarts</h1>
        <p>备注：采用较为麻烦的数据实现方式</p>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 参考：http://www.cnblogs.com/qjqcs/p/5852958.html
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption({
                title: {
                    text: '微信公众号用户总数',
                    subtext: '每日累计用户数（单位：个）',
                    left: 'center' //标题居中 
                },
                tooltip: {},
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false}, //  数据视图
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true}, //  刷新
                        saveAsImage: {show: true},                   //  下载为图片
                        right: '5%',
                    }
                },
                legend: {
                    data: ['ref_date']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },                   
                xAxis: [
                    {
                        type: 'category',
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                dataZoom: [
                    {
                        id: 'dataZoomX',
                        type: 'slider',
                        xAxisIndex: [0],
                        filterMode: 'filter', // 设定为 'filter' 从而 X 的窗口变化会影响 Y 的范围。
                        start: 80,
                        end: 100
                    },
                ],
                series: [
                    {
                        "name": "cumulate_user",
                        "type": "bar",
                        "data": []
                    }
                ]
            });

            var arr1 = [], arr2 = [];
            function jsonData() {
                $.ajax({
                    type: "post",
                    async: false, // false为同步执行，true为异步执行
                    url: "user_cumulate_bak.php",
                    data: {num: '100'},
                    dataType: "json",
                    success: function (result) {
                        if (result) {
                            for (var i = 0; i < result.length; i++) {
                                arr1.push(result[i].ref_date);
                                arr2.push(result[i].cumulate_user);
                            }
                        }
                        return arr1, arr2;
                    }
                })
            }
            jsonData();
            // 填入数据
            myChart.setOption({
                xAxis: {
                    data: arr1
                },
                series: [{
                        // 根据名字对应到相应的系列
                        name: '用户数',
                        data: arr2
                    }]
            });

        </script>    
    </body>
</html>